<div>
    <h2>
        <span id="health-page-heading" jhiTranslate="health.title">Health Checks</span>

        <button (click)="refresh()" class="btn btn-primary float-right">
            <fa-icon icon="sync"></fa-icon>
            <span jhiTranslate="health.refresh.button">Refresh</span>
        </button>
    </h2>

    <div class="table-responsive">
        <table aria-describedby="health-page-heading" class="table table-striped" id="healthCheck">
            <thead>
            <tr>
                <th jhiTranslate="health.table.service" scope="col">Service Name</th>
                <th class="text-center" jhiTranslate="health.table.status" scope="col">Status</th>
                <th class="text-center" jhiTranslate="health.details.details" scope="col">Details</th>
            </tr>
            </thead>
            <tbody *ngIf="health">
            <tr *ngFor="let componentHealth of health.components | keys">
                <td>
                    {{ 'health.indicator.' + componentHealth.key | translate }}
                </td>
                <td class="text-center">
                        <span [ngClass]="getBadgeClass(componentHealth.value.status)" class="badge"
                              jhiTranslate="{{ 'health.status.' + componentHealth.value.status }}">
                            {{ componentHealth.value.status }}
                        </span>
                </td>
                <td class="text-center">
                    <a (click)="showHealth(componentHealth)" *ngIf="componentHealth.value.details" class="hand">
                        <fa-icon icon="eye"></fa-icon>
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
